<template>
	<view class="page_view">
		<view class="page_view_zhanwei"></view>
		<view class="page_title">新人注册</view>
		<view class="content">
			<view class="input_item">
				<input type="text" placeholder="输入推荐码（必填）" v-model="from.invitation_code" placeholder-style="color: #999;" />
			</view>
			<view class="input_item">
				<input type="text" placeholder="真实姓名" v-model="from.realname" placeholder-style="color: #999;" />
			</view>
			<view class="input_item" @click="choose_data">
				<input type="text" placeholder="出生日期" disabled v-model="from.birthday" placeholder-style="color: #999;" />
			</view>
			<view class="input_item" @click="choose_sex">
				<input type="text" disabled placeholder="性别" disabled v-model="from.sex" placeholder-style="color: #999;" />
			</view>
			<view class="input_item">
				<input type="text" placeholder="身份证号" v-model="from.id_number" placeholder-style="color: #999;" />
			</view>
			<!-- <view class="input_item">
				<input type="text" pchoose_sexlaceholder="联系方式" v-model="from.mobile" placeholder-style="color: #999;" />
			</view> -->
			<view class="input_item">
				<input type="text" placeholder="我的地址" v-model="from.address" placeholder-style="color: #999;" />
			</view>
		</view>
		<view class="btn" @click="submit">注册</view>
		<u-picker :show="show" :columns="columns" :immediateChange="true" @close="sexclose" @cancel="sexclose" @confirm="sexconfirm"></u-picker>
		<u-datetime-picker
			ref="datetimePicker"
			:show="dateshow"
			:closeOnClickOverlay="true"
			@close="dateclose"
			@cancel="dateclose"
			@confirm="dateconfirm"
			:minDate="-631180800000"
			:maxDate="maxDate"
			mode="date"
			:formatter="formatter"
		></u-datetime-picker>
	</view>
</template>
<script>
import { formatTimeDay } from '@/utils/util1.js';
import{register} from '@/api/login.js'
// var date = new Date()
export default {
	data() {
		return {
			show: false,
			dateshow: false,
			columns: [['女', '男']],
			maxDate:Date.parse(new Date()),
			from: {
				invitation_code: '',
				realname: '',
				birthday: '',
				gender: '',//性别 0女 1男
				sex:'',//男女
				id_number: '',
				// mobile: '',
				address: ''
			}
		};
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		choose_data() {
			this.dateshow = true;
		},
		dateclose() {
			this.dateshow = false;
		},
		dateconfirm(e) {
			let date = formatTimeDay(new Date(e.value));
			this.from.birthday = date;
			this.dateshow = false;
		},
		choose_sex() {
			this.show = true;
		},
		sexclose() {
			this.show = false;
		},
		sexconfirm(e) {
			console.log(e);
			this.from.gender = e.indexs[0];
			this.from.sex = e.value[0];
			this.show = false;
			
		},
		submit() {
			let t = this
			for (const key in t.from) {
				if (t.from.hasOwnProperty(key)) {
					if (t.from[key] === '' || t.from[key] === null) {
						uni.showToast({
							title: '请将信息填写完整',
							icon: 'none'
						});
						return false; 
					}
				}
			}
			register(t.from).then(res=>{
				console.log(res)
				if(res.code == 200001){
					let userinfo = uni.getStorageSync('userinfo')
					userinfo.sex = t.from.gender
					uni.setStorageSync('userinfo',userinfo)
					uni.showToast({
						title:'注册成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}
			})
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.page_view {
	width: 100%;
	padding: 0 80rpx;
	box-sizing: border-box;
}
.page_view_zhanwei {
	width: 100%;
	height: 170rpx;
}
.content {
	width: 100%;
	margin-top: 16rpx;
}
.page_title {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 44rpx;
	font-weight: 700;
}
.input_item input {
	width: 100%;
	height: 124rpx;
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 32rpx;
	font-weight: 400;
	border-bottom: 1rpx solid #f4f4f6;
}
.btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-family: Alibaba PuHuiTi 2;
	font-size: 30rpx;
	font-weight: 400;
	border-radius: 68rpx;
	background: #0165fb;
	margin-top: 200rpx;
}
</style>
